<template>
  <template v-for="(item,index) in $props.menuData" :key="index">
    <el-menu-item v-if="!item.children || item.children.length == 0" :index="item.meta.id" :key="item.meta.id" @click="handleClick(item,item.meta.id)">
      <el-icon size="20">
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>
          {{item.meta.name}}
        </span>
    </el-menu-item>
    <el-sub-menu :index="item.meta.id" :key="item.meta.id" v-else>
      <template #title>
        <el-icon size="20">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>
          {{item.meta.name}}
        </span>
      </template>
      <tree-menu :menuData="item.children"></tree-menu>
    </el-sub-menu>
  </template>
</template>
<script setup>
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'

const store=useStore()
const props=defineProps(['menuData'])
const router=useRouter()
const handleClick=(item,id)=>{
  store.commit('addMenu',item.meta)
  router.push(item.meta.path).catch(error => {
    console.error('Navigation failed:', error);
  })
  console.log('succsse')
}
</script>
<style scoped>

</style>
